<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      :before-close="handleClose"
      :title="title"
      width="60%"
    >
      <div class="table">
        <ElScrollbar
          wrap-class="scrollbar-wrapper"
          wrap-style="overflow-x: auto;"
        >
          <ElTable
            ref="multipleTableRef"
            :border="true"
            :data="tableData"
            :row-key="getRowKey"
            :span-method="objectSpanMethod"
          >
            <ElTableColumn label="彩屏标识" width="auto">
              <template #default="{ row }">
                <el-input v-model="row.UUID" type="text" />
              </template>
            </ElTableColumn>
            <ElTableColumn label="组合编码" width="auto">
              <template #default="{ row, $index }">
                <el-input
                  :disabled="true"
                  type="text"
                  :value="csCodeCombo(row, $index)"
                />
              </template>
            </ElTableColumn>
            <ElTableColumn label="正反面" width="auto">
              <template #default="{ row }">
                <el-select
                  v-model="row.CSName"
                  class="m-2"
                  :disabled="true"
                  placeholder="请选择正反面"
                >
                  <el-option
                    v-for="item in csNames"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </template>
            </ElTableColumn>
            <ElTableColumn label="彩屏类型" min-width="90">
              <template #default="{ row }">
                <el-select
                  v-model="row.LCDType"
                  class="m-2"
                  placeholder="请选择彩屏类型"
                >
                  <el-option
                    v-for="item in lcdTypes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </template>
            </ElTableColumn>
            <ElTableColumn label="版本号" width="auto">
              <template #default="{ row }">
                <el-input v-model="row.Version" type="text" />
              </template>
            </ElTableColumn>
            <ElTableColumn label="箱号" width="auto">
              <template #default="{ row }">
                <el-input v-model="row.Remark" type="text" />
              </template>
            </ElTableColumn>
            <ElTableColumn label="操作" width="100">
              <template #default="{ row, $index }">
                <ElButton link type="danger" @click="deleteRow(row, $index)">
                  删除
                </ElButton>
              </template>
            </ElTableColumn>
          </ElTable>
          <div class="add-cs-btn">
            <el-button type="primary" @click="addDoubleCs">添加</el-button>
          </div>
        </ElScrollbar>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="confirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { ElTable } from 'element-plus'
  import { csstockbatch } from '@/api/mupro'

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '彩屏双屏入库',
    },
  })
  const dialogVisible = ref(props.visible)
  const multipleTableRef: any = ref(null)
  const tableData: any = ref([])
  watch(
    () => props.visible,
    () => {
      dialogVisible.value = props.visible
      tableData.value = [
        {
          UUID: '',
          CSCode: '',
          CSName: '正面',
          LCDType: '00',
          Version: '',
          Remark: '',
        },
        {
          UUID: '',
          CSCode: '',
          CSName: '反面',
          LCDType: '00',
          Version: '',
          Remark: '',
        },
      ]
    },
    { immediate: true }
  )
  const csNames = [
    {
      label: '正面',
      value: '正面',
    },
    {
      label: '反面',
      value: '反面',
    },
  ]
  const lcdTypes = ref([
    {
      label: '600*1024',
      value: '00',
    },
    {
      label: '800*1280',
      value: '03',
    },
  ])
  const getRowKey = (row: any) => {
    // console.log(row)
    return row
  }
  const addDoubleCs = () => {
    tableData.value.push(
      {
        UUID: '',
        CSCode: '',
        CSName: '正面',
        LCDType: '00',
        Version: '',
        Remark: '',
      },
      {
        UUID: '',
        CSCode: '',
        CSName: '反面',
        LCDType: '00',
        Version: '',
        Remark: '',
      }
    )
  }
  const deleteRow = (row: any, index: any) => {
    if (tableData.value.length < 3) {
      ElMessage({
        message: `至少保留一项`,
        type: 'error',
      })
      return
    }
    tableData.value.splice(tableData.value.indexOf(row), 2)
  }

  const emit = defineEmits(['close', 'confirm'])
  const handleClose = () => {
    dialogVisible.value = false
    emit('close', dialogVisible.value)
  }
  const confirm = async () => {
    const params = [...tableData.value] || []
    let falg = true
    params.map((item: any, index: number) => {
      if (index % 2 === 0) {
        item.CSCode = item.UUID + params[index + 1].UUID
      } else {
        item.CSCode = params[index - 1].UUID + item.UUID
      }
      if (item.UUID === '') {
        ElMessage({
          message: `请在第${index + 1}行填写彩屏标识`,
          type: 'warning',
        })
        falg = false
        return
      }
    })
    if (!falg) return
    const { code, data, message } = await csstockbatch(params)
    if (code === '200') {
      emit('confirm', tableData.value)
    } else {
      ElMessage({
        message: message,
        type: 'warning',
      })
    }
    // dialogVisible.value = false
  }
  const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
    if (columnIndex === 6) {
      if (rowIndex % 2 === 0) {
        return {
          rowspan: 2,
          colspan: 1,
        }
      } else {
        return {
          rowspan: 0,
          colspan: 0,
        }
      }
    }
  }
  const csCodeCombo = (row: any, index: any) => {
    if (index % 2 === 0) {
      return tableData.value[index].UUID + tableData.value[index + 1].UUID
    } else {
      return tableData.value[index - 1].UUID + tableData.value[index].UUID
    }
  }
</script>

<style lang="scss" scoped>
  .table {
    .condition {
      margin-bottom: 20px;
      .color_494949 {
        color: #494949;
      }

      .w164 {
        width: 164px;
      }

      .mb20 {
        margin-bottom: 20px;
      }

      .mr14 {
        margin-right: 14px;
      }
    }
  }
  .tag {
    font-size: 14px;
  }

  .add-cs-btn {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
</style>
